
<template>
    <div id="app" class="login-cont">
        <!-- <router-view></router-view> -->
        <div class="login-box">
            <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginRef">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-goods" show-password v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item class="login-btn">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="loginRest">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default ({
    name: 'app',
    data( ) {
        return { 
            loginForm: {
                username: 'admin',
                password: '123456'
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请密码', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        loginRest: function () {
            this.$refs.loginRef.resetFields()
        },
        login: function () {
            this.$refs.loginRef.validate( async valid => {
                if (valid) {
                    const result = await this.$http.post('login', this.loginForm)
                    const res = result.data
                    if (res.meta.status === 200) {
                        this.$message.success('登录成功')
                        /* 登录成功后服务器会返回一个token 需要保存到sessionStorage 只在会话期间有效 */
                        window.sessionStorage.setItem('token', res.data.token)
                        /* 通过编程式导航跳转到后台主页home 路由地址是 /home */
                        this.$router.push('/home')
                    } else {
                        this.$message.error('登录失败')
                    }
                }
            })
        }
    }
})
</script>
<style scoped>
    .login-cont{
        background-color: #2b4b6b;
        height:100%;
    }
    .login-box{
        width:600px;
        height:400px;
        background-color:#fff;
        border-radius: 3px;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    .login-box:before{
        content:'';
        display: block;
        width:180px;
        height:180px;
        background-image:url('../assets/1.jpg');
        background-size:cover;
        background-repeat:no-repeat;
        border:1px solid red;
        border-radius:50%;
        transform: translate(210px,-90px);
    }
    .login-form{
        padding:0 10px;
    }
    .login-btn{
        display: flex;
        justify-content: flex-end;
    }
</style>
